<template>
    <view class="leo-tree">
        <view v-if="edit" class="tree-item">
            <view class="head h-flex">
                <view class="head-1">
                    <text class="txt">新增事件类型</text>
                </view>
                <view class="p-t-20 p-r-30">
                    <image src="../../static/addblue.png" class="edit-icon"
                        @click="addItem({ id: 0, children: [], pid: 0 })" />
                </view>
            </view>
        </view>
        <treeNode v-for="item in data" :items="data" :item="item" :key="item[defaultProps.id]"
            :defaultProps="defaultProps" :divider="divider" :edit="edit" :unfold="unfold" @up-item="upItem"
            @down-item="downItem" @add-item="addItem" @delete-item="deleteItem" @finger-action="fingerAction"
            @onlongPress="onlongPress"></treeNode>
        <neil-modal :show="inputshow" @close="close" :title="inputtitle" @cancel="cancel" @confirm="inputconfirm">
            <div>
                <input v-model="inputcontent" style="margin:20upx" placeholder="请输入..." />
                <button v-if="hasColor" :style="{ margin: '20rpx', background: checkedColor }"
                    @click="openColor">选择颜色</button>
                <view v-else :style="{ margin: '20rpx'}" >
                    <uni-data-select :key="selectKey" v-model="targetId" :localdata="targetList" placeholder="请选择目标"></uni-data-select>
                </view>
                
            </div>

        </neil-modal>
        <view>
            <t-color-picker ref="colorPicker" :color="color" @confirm="confirmColor"></t-color-picker>
        </view>
    </view>
</template>

<script>
import neilModal from './tree-node/neil-modal.vue';
import treeNode from './tree-node/tree-node.vue';
import tColorPicker from '../t-color-picker/t-color-picker.vue'
export default {
    components: {
        treeNode,
        neilModal,
        tColorPicker
    },
    props: {
        data: {
            type: Array,
            default: () => {
                return []
            }
        },
        divider: {
            type: Boolean,
            default: false
        },
        unfold: {
            type: Boolean,
            default: false
        },
        edit: {
            type: Boolean,
            default: false
        },
        defaultProps: {
            type: Object,
            default: () => {
                return {
                    pid: 'pid',
                    id: 'id',
                    children: 'children',
                    label: 'label',
                    color: 'color',
                    target: 'target'
                }
            }
        }
    },
    provide() {
        return {
            defaultProps: this.defaultProps,
            onClickItem: this.onClickItem,
            upItem: this.upItem,
            downItem: this.downItem,
            addItem: this.addItem,
            editItem: this.editItem,
            deleteItem: this.deleteItem,
            fingerAction: this.fingerAction,
            divider: this.divider,
            unfold: this.unfold,
            edit: this.edit,
            onlongPress: this.onlongPress
        }
    },
    data() {
        return {
            pNodeData: {},
            addContent: '',
            addshow: false,
            inputtitle: '新增节点',
            inputshow: false,
            hasColor: false,
            inputcontent: '',
            color: { r: 255, g: 255, b: 255, a: 1 },
            checkedColor: '#FFFFFF',
            targetList: [],
            targetId: 0,
            selectKey:Date.now()
        }
    },
    watch: {
        data: {
            handler() {
                this.$nextTick(() => {
                    this.getTargetList()
                })
            },
            deep: true
        }
    },
    methods: {
        openColor(item) {
            // 打开颜色选择器
            this.$refs.colorPicker.open();
        },
        async getTargetList() {
			let result = await this.$API.target.getTargetList({
				page: {
					current: 1,
					size: 1000
				}
			})
			if (result.code == 200) {
				result.data.records.forEach(item => {
					this.targetList.push({
						text: item.targetDetail,
						value: item.targetId
					})
				})
			}
		},
        confirmColor(e) {
            console.log('颜色选择器返回值：', e.hex)
            this.checkedColor = e.hex
            console.log('color', this.color);
        },
        treeSort(tree, id, data) {
            // 树元素排序，并交换sort数据
            // tree 完整树列表
            // id: 待修改树列表排序的父级id
            // data {pnode: {}, itemA: {id:0, sort:0}, itemB: {id:0, sort:0}}
            const that = this;
            var switchData = 0;
            var operationflag = false;
            var forFn = function (arr, id, data) {
                // {pnode: {}, itemA: {id:0, sort:0}, itemB: {id:0, sort:0}}
                for (var i = 0; i < arr.length; i++) {
                    var item = arr[i];
                    if (item.pid != id) {
                        data.pnode = item;
                        forFn(item.children, id, data);
                    } else {
                        if (data.itemA.id === item.id) {
                            item.sort = data.itemA.sort;
                            switchData += 1;
                        }
                        if (data.itemB.id === item.id) {
                            item.sort = data.itemB.sort;
                            switchData += 1;
                        }
                    }
                    if (switchData === 2 && i === arr.length - 1) {
                        if (data.pnode.children) {
                            data.pnode.children = data.pnode.children.sort((a, b) => a.sort - b.sort);
                            operationflag = true;
                            break;
                            return true;
                        }
                    }
                }
            }
            forFn(tree, id, data);
            return operationflag;
        },
        onlongPress(e) {
            this.$emit('long-press', e);
        },
        onClickItem(e) {
            // console.log(e);
            this.$emit('node-click', e);
        },
        upItem(e) {
            this.$emit('up-item', e);
        },
        downItem(e) {
            this.$emit('down-item', e);
        },
        addItem(e) {
            this.pNodeData = e;
            this.inputcontent = '';
            this.inputtitle = '新增事件类型';
            this.hasColor = e.id == 0
            this.inputshow = true;
            this.selectKey = Date.now()
            // this.$emit('add-item', e);
        },
        hexToRGBA(hex) {
            let red = parseInt(hex.substring(1, 3), 16);
            let green = parseInt(hex.substring(3, 5), 16);
            let blue = parseInt(hex.substring(5, 7), 16);
            return {
                r: red,
                g: green,
                b: blue,
                a: 1
            }
        },
        editItem(e) {
            // console.log(JSON.stringify(e));
            this.inputcontent = e[this.defaultProps.label];
            this.inputtitle = '编辑事件类型';
            this.pNodeData = e;
            this.hasColor = e.pid == 0
            this.targetId = e.target
            this.selectKey = Date.now()
            if (this.hasColor) {
                this.checkedColor=e.color
                this.color = this.hexToRGBA(e.color)
            }
            this.inputshow = true;
            // this.$emit('add-item', e);
        },
        deleteItem(e) {
            // console.log(e.id);
            this.$emit('delete-item', e);
        },
        fingerAction(e) {
            // console.log(e.item,e.action);
            // action:1上滑, 2下滑，3左滑，4右滑
            this.$emit('finger-action', e);
        },
        inputconfirm() {
            if (this.inputtitle === '新增事件类型') {
                if (this.inputcontent && this.pNodeData) {
                    console.log('this.inputcontent', this.inputcontent, 'this.inputcontent', this.pNodeData);
                    this.$emit('add-item', { 
                        pNodeData: this.pNodeData, 
                        addContent: this.inputcontent, 
                        addColor: this.hasColor ? this.checkedColor : '' ,
                        addTarget: this.hasColor ? 0 : this.targetId
                    });
                    this.checkedColor = ''
                    this.targetId = 0
                }
            }
            if (this.inputtitle === '编辑事件类型') {
                this.$emit('edit-item', { 
                    pNodeData: this.pNodeData, 
                    editContent: this.inputcontent, 
                    editColor: this.hasColor ? this.checkedColor : '' ,
                    editTarget: this.hasColor ? 0 : this.targetId
                });
                this.checkedColor = ''
                this.targetId = 0
            }
        },
        close() {
            this.inputshow = false;
        },
        cancel() {
            this.inputcontent = '';
            this.pNodeData = {};
            this.inputshow = false;
            this.checkedColor= '';
            this.targetId = 0;
        }
    }
}
</script>

<style scoped>
.head {
    display: flex;
    align-items: center;
    line-height: 60rpx;
}

.head-1 {
    display: flex;
    flex-basis: auto;
    margin-top: 10rpx;
}

.txt {
    font-size: 30rpx;
    color: #222;
}

.p-r-30 {
    margin-right: 30rpx;
}

.p-t-20 {
    margin-top: 20rpx;
}

.h-flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.edit-icon {
    width: 40rpx;
    height: 40rpx;
    padding-right: 10rpx;
}
</style>
